<template>
  <el-container>
    <el-row style="margin: 1% auto;font-size:20px">角色列表</el-row>
    <br />
    <el-card style="margin-top:10px">
      <span>
        <el-button type="primary" size="small" @click="roleState =true">新增</el-button>
      </span>

      <el-table v-loading="tableLoding" :data="tableData.data" style="width: 100%">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="department" label="部门"></el-table-column>
        <el-table-column prop="state" label="状态" :formatter="stateChangeData" width="80px"></el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">编辑</el-button>
            <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
          @next-click="nextPage" :current-page="tableData.currentPage" :page-sizes="[5, 10, 15, 20,25,30,35,40]"
          :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </el-card>
    <el-footer></el-footer>

    <el-dialog title="角色新增（修改）" :visible.sync="roleState" center :append-to-body="true" :lock-scroll="false"
      width="20%">
      <el-form :rules="roleRules" :model="roleDetail" ref="roleDetail" style="font-size:20px;" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="roleDetail.name"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-input v-model="roleDetail.department"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="roleDetail.state" placeholder="请选择状态" style="width:100%">
            <el-option label="启用" value="1"></el-option>
            <el-option label="未启用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="putRoleSave(roleDetail)" type="primary">保存</el-button>
          <el-button @click="putRoleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </el-container>
</template>

<script>
  import {
    getRoleList,
    addRole,
    removeRole,
    getRoleListPageApi
  } from "@/api/roleApi";
  export default {
    data() {
      return {
        roleState: false,
        putRoleState: false,
        tableData: {
          //表格data
          data: [{
            name: "",
            department: "",
            state: ""
          }],
          currentPage: 1,
          pageSize: 5,
          total: 0
        },
        tableLoding: false, //表格加载
        roleDetail: {
          name: "",
          department: "",
          state: ""
        },
        roleRules: {
          name: [{
              required: true,
              message: "请输入角色名称",
              trigger: "blur"
            },
            {
              min: 1,
              message: "最少输入1个字符",
              trigger: "blur"
            }
          ],
          department: [{
            required: true,
            message: "请输入部门名称",
            trigger: "blur"
          }],
          state: [{
            required: true,
            message: "请选择状态",
            trigger: "change"
          }]
        }
      };
    },
    created: function () {
      this.getRole();
    },
    methods: {
      // 数据控制
      getRole() {
        this.tableLoding = true;
        getRoleListPageApi(this.tableData)
          .then(response => {
            this.tableData.data = response.data.data.roleList;
            this.tableData.total = response.data.data.total;
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: error,
              type: "error"
            });
          });
        this.tableLoding = false;
      },
      changePageSize(val) {
        this.tableData.pageSize = val;
        this.getRole();
      },
      changeCurrentPage(val) {
        this.tableData.currentPage = val;
        this.getRole();
      },
      prevPage(val) {
        this.tableData.currentPage = val;
        this.getRole();
      },
      nextPage(val) {
        this.tableData.currentPage = val;
        this.getRole();
      },
      stateChangeData: function (row, column) {
        return row.state == "1" ? "启用中" : row.state == "2" ? "未启用" : "未知";
      },
      handleEdit(index, row) {
        this.roleState = true;
        this.roleDetail.name = row.name;
        this.roleDetail.department = row.department;
        this.roleDetail.state = "";
        console.log(index, row);
      },
      handleDelete(index, row) {
        removeRole(row.id)
          .then(response => {
            this.getRole();
            this.$message.success(response.data.respondMessage);
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: error.data.respondMessage,
              type: "error"
            });
          });
      },
      //新增角色
      putRoleSave(roleDetail) {
        if (roleDetail.name && roleDetail.department && roleDetail.state) {
          addRole(roleDetail)
            .then(response => {
              this.getRole();
              this.$message.success(response.data.respondMessage);
            })
            .catch(error => {
              this.$message({
                showClose: true,
                message: error.data.respondMessage,
                type: "error"
              });
            });
        } else {
          this.$message.error("请正确输入数据！");
          return;
        }
        this.putRoleCancel();
        this.roleState = false;
      },
      putRoleCancel() {
        this.roleDetail = {
          name: "",
          department: "",
          state: ""
        };
        this.roleState = false;
      }
    }
  };
</script>

<style>
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #70b3ff87 !important;
  }
</style>